<template>
  <Card style="margin: 20px 0" title="基本信息">
    <!--    spu参数配置-基本信息-->
    <BasicForm @register="registerForm" />
  </Card>
</template>

<script setup lang="ts">
  import { watch } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { Card } from 'ant-design-vue';
  import { modalFormSchema } from '@/views/spu/spu/data';
  import { BasicForm, useForm } from '@/components/Form';

  const props = defineProps({
    details: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  watch(
    () => props.details,
    (val) => {
      setFieldsValue(val);
    },
    {
      deep: true,
    },
  );

  const schemas = cloneDeep(modalFormSchema);
  schemas[0].ifShow = true;
  schemas[0].componentProps = { disabled: true };
  schemas.forEach((schema) => (schema.colProps = { span: 6 }));
  const [registerForm, { validate, setFieldsValue }] = useForm({
    schemas,
    labelWidth: 100,
    baseColProps: { span: 22 },
    showActionButtonGroup: false,
  });

  defineExpose({ validate });
</script>

<style scoped lang="less"></style>
